<html>
    <head>
        <style>
            body {
              max-width: 600px;
              margin: 50px auto;
              font-family: Arial;
              font-size: 15px;
              line-height: 1.5em;
            }
            .tip {
              font-size: .8em;
            }
        </style>
    </head>
    <body>

<h1>GEXF format import plugin</h1>

<p>This plugins imports a graph represented as an XML string in GEXF format to the JointJS graph structure.</p>

<p>This plugin contains only one function <b><code>joint.format.gexf.toCellsArray(xmlString, makeElement, makeLink)</code></b>,
where <code>xmlString</code> is an XML string representing a graph in GEXF format, <code>makeElement</code> is a function that takes
an object with <code>id</code>, <code>width</code>, <code>height</code> and <code>label</code> properties and returns a JointJS shape for this node.
<code>makeLink</code> is a function that takes an object with <code>source</code> and <code>target</code> properties and returns
a JointJS link for that edge.</p>

<h2>Install</h2>

<p>Include <code>joint.format.gexf.js</code> file into your HTML:</p>
<pre><code>
&lt;script type="text/javascript" src="joint.format.gexf.js"&gt;&lt;/script&gt;
</code></pre>


<h2>Usage</h2>

<pre><code>
var cells = joint.format.gexf.toCellsArray(
    someGEXF_XML_String,
    function makeElement(attrs) {
        return new joint.shapes.basic.Rect({
           id: attrs.id,
           size: { width: attrs.width, height: attrs.height },
           attrs: { text: { text: attrs.label } }
        });
    },
    function makeLink(attrs) {
        return new joint.dia.Link({
            source: { id: attrs.source },
            target: { id: attrs.target }
        });
    }
);

graph.resetCells(cells);
</code></pre>
